<template>
  <div class="container-header">
    <div class="nowTime">
      <div class="time">{{nowTime}}</div>
      <div class="date-week">
        <div class="date">{{nowDate}}</div>
        <div class="week">{{nowWeek}}</div>
      </div>
    </div>
    <div class="location">
      <dv-decoration-12 style="width:0.625rem;height:0.625rem;" />
    </div>
    <h3>{{topTitle}}</h3>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props: {
    topTitle: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      nowTime: null,
      nowDate: null,
      nowWeek: null,
      weekday: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    }
  },
  mounted () {
    this.timeFn()
  },
  methods: {
    timeFn () {
      setInterval(() => {
        this.nowTime = this.formatTime(new Date(), 'HH:mm:ss')
        this.nowDate = this.formatTime(new Date(), 'yyyy-MM-dd')
        this.nowWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    formatTime (time, fmt) {
      if (!time) return ''
      else {
        const date = new Date(time)
        const o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'H+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds(),
          'q+': Math.floor((date.getMonth() + 3) / 3),
          S: date.getMilliseconds()
        }
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        }
        for (const k in o) {
          if (new RegExp('(' + k + ')').test(fmt)) {
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
          }
        }
        return fmt
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container-header{
  width:100%;
  height:0.888rem;
  text-align: center;
  box-sizing: border-box;
  .nowTime{
    position: absolute;
    top:0.45rem;
    height: 0.625rem;
    display: flex;
    align-items: center;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#5ec0d2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .time {
    font-size: 0.375rem;
    margin-left: 0.45rem;
    }
    .date-week {
      text-align: left;
      margin-left: 0.25rem;
      font-size: 0.1875rem;
    }
  }

  .location{
    position: absolute;
    right:0.5rem;
    top:0.575rem;
  }
  h3{
    line-height:0.925rem;
    font-size: 0.45rem;
    font-weight: 800;
    color:#fff;
    margin: 0;
  }
}
</style>
